<template>
  <div>
    <!-- 表格操作项 start  -->
    <template v-for="(item, index) in tableBtn">
      <Button :key="index" type="primary" :icon="item.icon" class="ivu-mr-8" v-if="showBtn(item.label)" :loading="item.loading"
        @click="tableTopOperate(item)">{{ item.label }}</Button>
    </template>

    <!-- <Button icon="md-list"
            class="ivu-ml-8"
            v-show="tableBatchBtns && tableBatchBtns.length>0 && tableSelectData &&tableSelectData.length">批量操作</Button> -->
    <Dropdown class="ivu-ml-8" v-show="tableSelectData && tableSelectData.length > 0" @on-click="handleClickItem">
      <Button>更多操作
        <Icon type="ios-arrow-down" />
      </Button>
      <DropdownMenu slot="list">
        <template v-for="(item, index) in tableBatchBtns">
          <DropdownItem :key="index" :name="item.name" v-if="showBtn(item.label)">{{ item.label }}</DropdownItem>
        </template>

      </DropdownMenu>
    </Dropdown>
    <!-- 表格操作项 end  -->
    <BatchImportDialog
      :visible.sync="batchImport.visible"
      :dialogTitle="batchImport.dialogTitle"
      :contents="batchImport.contents"
      :actionUrl="batchImport.actionUrl"
    />
  </div>
</template>
<script>
import dynamictablebtns from '@/mixins/dynamictablebtns'; // 混入通用代码
import { ApiRequest } from '@api/basePage';
import { mapGetters } from 'vuex';
import { commonRequest } from '@/api/commonHttp';
import { createExcelByExport, generateUuid } from '@/utils/bizUtils';
import BatchImportDialog from '@/components/BatchImportDialog';
export default {
  mixins: [
    dynamictablebtns
  ],
  components: {
    BatchImportDialog
  },
  data () {
    return {
      batchImport: {
        visible: false,
        dialogTitle: '批量导入属性',
        contents: [
          '线下整理好需导入的表格。',
          '表格格式：属性编号 属性名称 属性值编号 属性值名称  位置',
          '导入表格从第二行开始导入，第一行为表头不导入。',
          '提交后页面关闭，系统后台更新数据，根据数据量大小更新时间不同。',
          '每次导入的限制为1000。',
        ],
        actionUrl: '/sysback/template/producttemplateattr/importTemplate'
      },
    }
  },
  computed: {
    ...mapGetters('permissions/systemBtns', [
      'showBtn'
    ]),
  },
  methods: {
    tableTopOperate (item) {
      const nameMapsExecutor = {
        'add': this.handleAdd,
        'export': this.handleExport,
        'batchImport': () => { this.batchImport.visible = true }
      }
      const runFn = nameMapsExecutor[item.name] ?? (() => {})
      runFn(item)
    },
    // 新增
    handleAdd () {
      this.$router.push({ name: 'attributeAdd' })
    },
    // 导出
    async handleExport (item) {
      const data = {}
      const loadingFn = state => { item.loading = state }
      const res = await commonRequest({
        url: '/sysback/template/producttemplateattr/exportTemplate',
        type: 'get',
        data,
        loadingFn,
        isExport: true
      })
      createExcelByExport({ excelTitle: `属性批量关联属性值_${generateUuid()}`, res })
    },
    handleClickItem (name) {
      if (name === 'delete') {
        let uuidArr = [];
        let isHave = false;
        this.tableSelectData.forEach(item => {
          uuidArr.push(item.uuid);
          if (item.inUse === '1') {
            isHave = true;
          }
        });
        if (isHave) {
          this.$Message.info('包含正在使用的属性,无法删除!');
        } else {
          this.$Modal.confirm({
            title: '批量删除',
            content: '确定要删除这些数据吗？',
            onOk: () => {
              let data = {
                uuids: uuidArr.join(',')
              }
              // 开始请求列表
              ApiRequest(this.requestApi.delTableList.url, this.requestApi.delTableList.type, data, true).then(res => {
                if (res.retStatus === '1') {
                  this.$Message.success('批量删除成功');
                  this.tableSelectData = [];
                  this.actionsChange();
                }
              })
            }
          });
        }
      }
    }
  }
}
</script>
